import {
  Engine,
  Render,
  Runner,
  Common,
  MouseConstraint,
  Composite,
  Composites,
  Mouse,
  World,
  Events,
  Body,
  Bodies
} from 'Matter'


export default () => {

  let
    // body = Body.create({
    //   speed: 500
    // }),
    engine = Engine.create({
      enableSleeping: true,
      world: World.create({
        gravity: {
          x: 0,
          y: 1
        }
      })
    }),
    { world } = engine,
    render = Render.create({
      element: document.body,
      engine: engine,
      options: {
        background: '#fff',
        width: 750,
        height: 1334,
        wireframes: false,
        // showVelocity: true
      }
    }),
    { canvas } = render,
    runner = Runner.create()

  canvas.style.position = 'absolute'
  canvas.style.top = canvas.style.left = 0
  canvas.style.width = canvas.style.height = '100%'

  World.add(world, [
    Bodies.rectangle(canvas.width / 2, 0 - 2000 / 2 + 25, canvas.width, 2000, {
      isStatic: true,
    }),
    Bodies.rectangle(canvas.width / 2, canvas.height + 2000 / 2 - 25, canvas.width, 2000, {
      isStatic: true,
    }),
    Bodies.rectangle(0 - 2000 / 2 + 25, canvas.height / 2, 2000, canvas.height, {
      isStatic: true,
    }),
    Bodies.rectangle(canvas.width + 2000 / 2 - 25, canvas.height / 2, 2000, canvas.height, {
      isStatic: true,
    }),

    Bodies.rectangle(canvas.width * .5, canvas.height / 2, canvas.width, 25, {
      isStatic: true,
      // axes: [{
      //   x: 0,
      //   y: 0
      // }],
    }),
  ])


  // console.log(body, Bodies)

  World.add(world,

    Composites.stack(60, 30, 7, 9, 34, 15, (x, y) => {
      let body = Bodies.polygon(
        x,
        y,
        4,
        50,
        {
          restitution: .8,
          // axes: [{
          //   x: 0,
          //   y: 0
          // }],
          // density: 1,
          // slop: 0.1,
          // frictionStatic: 10000,
          // frictionAir: 0.01,
          // friction: 0.3,
          // inertia: 0.01,
          // isSleeping: true,
          // angle: 1,
          // speed: 100,
          sleepThreshold: 10,
          // render: {
          //   // visible: false,
          //   // lineWidth: 0
          // }
        }
      )

      Body.setPosition(body, { x: 25, y: 25 })
      Body.setVelocity(body, { x: 50, y: 50 })
      return body



    })



  )

  World.add(world, MouseConstraint.create(engine, {
    mouse: Mouse.create(canvas),
    constraint: {
      stiffness: 1,
      render: {
        visible: true
      }
    }
  }))

  Render.run(render)
  Runner.run(runner, engine)

}